<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input type="text" v-model="name" placeholder="张三" />
      </view>
      
      <view class="form-item">
        <text class="label">联系电话</text>
        <input type="tel" v-model="phone" placeholder="18888888888" @blur="validatePhone('phone')" />
        <text v-if="phoneError" class="error">{{ phoneError }}</text>
      </view>
      
      <view class="form-item">
        <text class="label">备用联系方式</text>
        <input type="tel" v-model="backupPhone" placeholder="18888888888" @blur="validatePhone('backupPhone')" />
        <text v-if="backupPhoneError" class="error">{{ backupPhoneError }}</text>
      </view>
      
      <view class="form-item">
        <text class="label">酒店地址</text>
        <input type="text" v-model="hotelAddress" placeholder="××省××市××区亚泉酒店" />
      </view>
      
      <view class="form-item">
        <text class="label">旅游线路</text>
        <view class="checkbox-group">
          <checkbox-group @change="onRouteChange">
            <view class="checkbox-row">
              <label v-for="route in routes" :key="route" class="checkbox-label">
                <checkbox :value="route" :checked="selectedRoutes.includes(route)" />
                {{route}}
              </label>
            </view>
          </checkbox-group>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">参与人数</text>
        <view class="number-input" v-for="(item, index) in participants" :key="index">
          <text>{{item.type}}</text>
          <text class="item-price">¥{{item.price}}</text>
          <view class="counter">
            <button @click="decreaseCount(index)">-</button>
            <input type="number" v-model="item.count" />
            <button @click="increaseCount(index)">+</button>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">需要支付金额</text>
        <view class="price_box">
          <input type="number" placeholder="248" v-model="totalPrice" class="total-price"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      phone: '18888888888',
      backupPhone: '18888888888',
      hotelAddress: '××省××市××区亚泉酒店',
      routes: ['旅顺', '金石滩', '大连市区', '圣亚', '丹东', '山东半岛', '天津', '广东', '四川盆地'],
      selectedRoutes: ['旅顺', '圣亚'],
      participants: [
        { type: '成人', price: 148, count: 1 },
        { type: '老人学生', price: 100, count: 1 },
        { type: '儿童(一米三以下)', price: 50, count: 0 }
      ],
      totalPrice: 248,
      phoneError: '',
      backupPhoneError: ''
    }
  },
  methods: {
    onRouteChange(e) {
      this.selectedRoutes = e.detail.value;
    },
    decreaseCount(index) {
      if (this.participants[index].count > 0) {
        this.participants[index].count--;
      }
      this.calculateTotal();
    },
    increaseCount(index) {
      this.participants[index].count++;
      this.calculateTotal();
    },
    calculateTotal() {
      this.totalPrice = this.participants.reduce((total, item) => {
        return total + (item.price * item.count);
      }, 0);
    },
    validatePhone(type) {
      const phoneRegex = /^1[0-9]{10}$/;
      if (type === 'phone' && !phoneRegex.test(this.phone)) {
        this.phoneError = '号码格式不正确';
      } else if (type === 'phone') {
        this.phoneError = '';
      }
      if (type === 'backupPhone' && !phoneRegex.test(this.backupPhone)) {
        this.backupPhoneError = '备用电话号码必须是以1开头的11位数字';
      } else if (type === 'backupPhone') {
        this.backupPhoneError = '';
      }
    },
    modifyPrice() {
      // Implement price modification logic
    },
    submitForm() {
      // Implement form submission logic
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.header {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}
.form-item {
  margin-bottom: 20rpx;
}
.label {
  display: block;
  margin-bottom: 10rpx;
  font-weight: 600;
}
input {
  width: 95%;
  height: 80rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  margin: auto; 
  justify-content: center; 
  align-items: center; 
  width: fit-content; /* 这将使盒子的宽度只包含其内容，从而使盒子可以被居中 */
}
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，如果想在垂直方向上居中，需要确保flex-direction为column或者你的元素高度固定 */
}
.checkbox-label {
  display: flex;
  align-items: center;
  width: 30%; /* Adjusted to fit three in a row */
  margin-bottom: 10rpx;
  justify-content: flex-start; /* Ensure proper alignment */
}
.checkbox-label checkbox {
  margin-right: 10rpx;
}
.number-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}
.counter {
  display: flex;
  align-items: center;
}
.counter button {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #f5f7fa;
  border: 1rpx solid #ddd;
}
.counter input {
  width: 80rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  height: 60rpx;
}
.item-price {
  color: red;
  font-size: 28rpx;
}
.price_box {
  display: flex;
  align-items: center;
  width: 97%;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  padding: 10rpx;
  border: 1rpx solid #ddd;
}
.total-price {
  width: 100px;
  border: none;
  background: none;
}
.modify-link {
  color: blue;
  margin-left: 20rpx;
  text-decoration: none;
}
.submit-btn {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007AFF;
  color: white;
  text-align: center;
  border-radius: 20rpx;
  margin-top: 40rpx;
}
.error {
  color: red;
  font-size: 24rpx;
}
</style>